<template>
  <view class="page custom-page">
    <custom-head gradient back title="添加积分项目">
      <view class="tool" slot="right" @click="handleAdd">
        <i class="iconfont icon-fenlei fenlei"></i>
      </view>
    </custom-head>

    <view class="content">


      <u-collapse :accordion="false" :item-style="itemStyle">
        <u-collapse-item :open="true" :title="item.group" v-for="(item, index) in initList" :key="index">
          <view class="line"></view>
          <view v-for="(j, index) in item.newList">
            <view class="item" @click="handleDailyEdit(j)">
              <view class="item_left">
                <view>
                  <image class="img" :src="j.icon" mode="widthFix"/>
                </view>
                <view class="text_2">{{ j.title }}</view>
              </view>
              <view class="item_right">
                <view class="round"> +{{ j.cnt }} </view>
                <u-icon name="arrow-right" color="#8F9399" size="32"></u-icon>
              </view>
            </view>
          </view>
        </u-collapse-item>
      </u-collapse>

      <!-- <view class="top_content" v-for="(item, index) in initList">
        <view class="title">
          <view class="text_1">{{ item.group }}</view>
          <u-icon name="arrow-down" color="#8F9399" size="32"></u-icon>
        </view>
        <view class="line"></view>
        <view v-for="(j, index) in item.newList">
          <view class="item" @click="handleDailyEdit(j)">
            <view class="item_left">
              <view>
                <image class="img" :src="j.icon" mode="widthFix"/>
              </view>
              <view class="text_2">{{ j.title }}</view>
            </view>
            <view class="item_right">
              <view class="round"> +{{ j.cnt }} </view>
              <u-icon name="arrow-right" color="#8F9399" size="32"></u-icon>
            </view>
          </view>
        </view>
        <view class="bgc"></view>
      </view> -->

      <!-- <view class="top_content">
        <view class="title">
          <view class="text_1">美术班积分组</view>
          <u-icon name="arrow-down" color="#8F9399" size="32"></u-icon>
        </view>
        <view class="line"></view>
        <view v-for="(item, index) in artisticList" :key="index">
          <view class="item" @click="handleArtsEdit(item.id)">
            <view class="item_left">
              <view>
                <image class="img" :src="item.img" mode="widthFix"/>
              </view>
              <view class="text_2">{{ item.text }}</view>
            </view>
            <view class="item_right">
              <view class="round"> +{{ item.count }} </view>
              <u-icon name="arrow-right" color="#8F9399" size="32"></u-icon>
            </view>
          </view>
        </view>
      </view> -->

    </view>

  </view>
</template>
<script>
import { getScore } from '../../api/modules/score';

export default {
  data() {
    return {
      initList: [],
      artisticList: [
        {
          id: 1,
          img: '../../static/img/homeAdd01.png',
          text: '按时到课',
          count: '3',
        },
        {
          id: 2,
          img: '../../static/img/homeAdd02.png',
          text: '课堂纪律',
          count: '3',
        },
        {
          id: 3,
          img: '../../static/img/homeAdd03.png',
          text: '完成作品',
          count: '3',
        },
      ],
      itemList: [{
					head: "赏识在于角度的转换",
					body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
					open: true,
					disabled: true
				},{
					head: "生活中不是缺少美，而是缺少发现美的眼睛",
					body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
					open: false,
				},{
					head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
					body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					open: false,
				}],
      itemStyle: {
        padding: '25rpx 25rpx 0',
        backgroundColor: '#fff',
        border: '1rpx solid #C8C9CB',
        static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
			},

    }
  },
  onShow() {
    this._getScore({page_no: 1, page_size: 10000});
  },
  mounted() {},

  methods: {
    handleAdd() {
      uni.navigateTo({
        url: `/pages/home/createIntegral`
      })
    },
    handleDailyEdit(item) {
      console.log('item', item)
      uni.navigateTo({
        url: `/pages/home/createIntegral?id=${item.id}`
      })
    },

    backList(arr) {
      if (!Array.isArray(arr)) {
        return
      }

      let arr1 = []
      let newList = []; // 返回的数组
      arr.forEach(i => {
        arr1.push(i.group)
      })
      let arr2 = arr1.filter(function(item, index, _arr) {
        //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
        return _arr.indexOf(item, 0) === index;
      });

      arr2.forEach((i, index) => {
        newList.splice(index, 0, { group: i, newList: arr.filter(j => j.group === i)})
      })

      return newList;
    },
    _getScore(param) {
      let url = getApp().globalData.glb_list.config.static_uri
      getScore(param).then(res => {
        const { code, data } = res || {}
        if ( code === 200 ) {
          let arr = data.list.filter(i => i.sid === this.glbId).map(i => ({...i, icon: `${url}${i.icon}`}))
          this.initList = this.backList(arr)
          // console.log('res', res)
        }
      })
    },
  }
}
</script>
<style scoped lang="scss">
.page {
  height: 100vh;
}
.content {
  .top_content {
    padding: 25rpx 0rpx 0rpx;
    background-color: #fff;
    .title {
      display: flex;
      justify-content: space-between;
      padding: 0 40rpx;
      margin-bottom: 16rpx;
      .text_1 {
        font-size: 34rpx;
        font-weight: 700;
      }
    }

    .line {
      width: 90%;
      height: 1rpx;
      border: 1rpx solid #C8C9CB;
      margin: 0 auto;
    }

   
  }
  
}

.item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 40rpx;
      margin-top: 25rpx;
      .item_left {
        display: flex;
        align-items: center;
        .img {
          width: 88rpx !important;
          height: 88rpx !important;
          border-radius: 50%;
          margin-right: 17rpx;
        }
        .text_2 {
          font-size: 28rpx;
        }
      }

      .item_right {
        display: flex;
        align-items: center;

        .round {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 48rpx !important;
          height: 48rpx !important;
          border-radius: 50%;
          background-color: #FFB400;
          margin-right: 10rpx;
          font-size: 24rpx;
        }
      } 
    }


.bgc {
    width: 100%;
    height: 24rpx;
    background-color: #f3f4f5;
  }
</style>
